import React, { useState } from 'react';
import ReactDOM from 'react-dom';

/* 
  useState的初始化只会执行一次
  每一次的视图更新 都会形成一个独立的作用域

*/

function App2() {
  let [state, setState] = useState({
    name: "珠峰",
    age: 100
  })
  const add = () => {
    //  就是一个重新顶替  不会合并
    setState({
      ...state,
      age: state.age + 10
    })
  }
  return <>
    <h1>{state.name}当前数字是{state.age}</h1>
    <button onClick={add}>+10</button>
  </>
}

function App(props) {
  // console.log(props)
  // let count = 100;
  let res = useState(100);
  // console.log(res)
  let [count, setCount] = res
  const change = (num) => {
    // count += num;
    // console.log(count)
    setCount(count + num)
  }
  const log = () => {
    setTimeout(() => {
      // console.log(count)
      setCount((n) => {
        console.log(n)
        return n
      })
    }, 3000);
  }
  return (<div>
    <h1>当前数字是{count}</h1>
    <button onClick={() => { change(10) }}>+10</button>
    <button onClick={() => { change(-5) }}>-5</button>
    <button onClick={log}>log</button>
  </div>)
}
ReactDOM.render(<App2 className='box' />, document.getElementById('root'))